<template>
  <article>
    <el-dialog :visible.sync="dialogPictureVisible" fullscreen>
      <img :src="dialogImageUrl" alt="dialogImageUrl" style="margin: 0 auto;"/>
    </el-dialog>
    <h1 class="t_nav">
      <a class="n1" href="/">网站首页</a>
      <a
        v-if="blogData.blogSort.uid"
        class="n2"
        href="javascript:void(0);"
        @click="goToSortList(blogData.blogSort.uid)"
      >{{ blogData.blogSort ? blogData.blogSort.sortName : "" }}</a>
    </h1>
    <div class="infosbox">
      <div class="newsview">
        <h3 v-if="blogData.title" class="news_title">{{ blogData.title }}</h3>
        <div v-if="blogData.blogSort.uid" class="bloginfo" style="margin-bottom: 10px;">
          <div class="outSide">
            <div>
              <img :src="blogData.authorAvatar" alt class="avatars"/>
            </div>
            <div class="inner">
              <div class="author"><span class="iconfont"></span>
                <a href="javascript:void(0);" @click="goToAuthor(blogData.author)"> {{ blogData.author }}</a>
              </div>
              <!--              <div>-->
              <!--&lt;!&ndash;                <span class="iconfont">&#xe603;</span>&ndash;&gt;-->
              <!--                <span class="iconfont"></span>-->
              <!--                <a-->
              <!--                  href="javascript:void(0);"-->
              <!--                  @click="goToSortList(blogData.blogSort.uid)"-->
              <!--                >{{blogData.blogSort ? blogData.blogSort.sortName:""}}</a>-->
              <!--              </div>-->
              <div class="view">
                <span class="iconfont">&#xe8c7;</span>
                <span>{{ blogData.clickCount }}</span>
              </div>
              <div class="like">
                <span class="iconfont">&#xe663;</span>
                <span>{{ blogData.collectCount }}</span>
              </div>
              <div class="createTime">
                <span class="iconfont">&#xe606;</span>
                <span> {{ blogData.createTime }}</span>
              </div>
            </div>
          </div>

          <!--          <ul>-->
          <!--            <li class="author">-->
          <!--              <span class="iconfont">&#xe60f;</span>-->
          <!--              <a href="javascript:void(0);" @click="goToAuthor(blogData.author)">{{blogData.author}}</a>-->
          <!--            </li>-->
          <!--            <li class="lmname">-->
          <!--              <span class="iconfont">&#xe603;</span>-->
          <!--              <a-->
          <!--                href="javascript:void(0);"-->
          <!--                @click="goToSortList(blogData.blogSort.uid)"-->
          <!--              >{{blogData.blogSort ? blogData.blogSort.sortName:""}}</a>-->
          <!--            </li>-->
          <!--            <li class="createTime">-->
          <!--              <span class="iconfont">&#xe606;</span>-->
          <!--              {{blogData.createTime}}-->
          <!--            </li>-->
          <!--            <li class="view">-->
          <!--              <span class="iconfont">&#xe8c7;</span>-->
          <!--              {{blogData.clickCount}}-->
          <!--            </li>-->
          <!--            <li class="like">-->
          <!--              <span class="iconfont">&#xe663;</span>-->
          <!--              {{blogData.collectCount}}-->
          <!--            </li>-->
          <!--          </ul>-->
        </div>
        <div class="tags">
          <a
            v-for="item in blogData.tagList"
            v-if="blogData.tagList"
            :key="item.uid"
            href="javascript:void(0);"
            target="_blank"
            @click="goToList(item.uid)"
          >{{ item.content }}</a>
        </div>
        <div class="news_about">
          <strong>版权</strong>
          <span v-html="blogData.copyright">
            {{ blogData.copyright }}
          </span>
        </div>
        <div
          v-highlight
          class="news_con ck-content"
          @click="imageChange"
          v-html="blogContent"
        >{{ blogContent }}
        </div>
      </div>

      <!--付款码和点赞-->
      <PayCode v-if="openAdmiration == '1'" :blogUid="blogUid" :praiseCount.sync="blogData.collectCount"></PayCode>

      <div v-if="sameBlogData.length > 0" class="otherlink">
        <h2>相关文章</h2>
        <ul>
          <li v-for="item in sameBlogData" :key="item.uid">
            <a
              :title="item.title"
              href="javascript:void(0);"
              @click="goToInfo(item.uid)"
            >{{ subText(item.title, 18) }}</a>
          </li>
        </ul>
      </div>
      <div :style="opemCommentCss" class="news_pl">
        <h2 v-if="openComment == '1'">文章评论</h2>
        <ul v-if="openComment == '1'">
          <CommentBox
            :commentInfo="commentInfo"
            :showCancel="showCancel"
            :userInfo="userInfo"
            @submit-box="submitBox"
          ></CommentBox>
          <div class="message_infos">
            <CommentList :commentInfo="commentInfo" :comments="comments"></CommentList>
            <div v-if="comments.length ==0" class="noComment">还没有评论，快来抢沙发吧！</div>
          </div>
        </ul>
      </div>
    </div>
    <div v-if="showSidebar" class="sidebar2">
      <side-catalog
        :class="vueCategory"
        v-bind="catalogProps"
      >
      </side-catalog>
    </div>
  </article>
</template>

<script>
import {getWebConfig} from "../api/index";
import {getBlogByUid, getSameBlogByBlogUid} from "../api/blogContent";
import CommentList from "../components/CommentList";
import CommentBox from "../components/CommentBox";
// vuex中有mapState方法，相当于我们能够使用它的getset方法
import {mapMutations} from "vuex";
import ThirdRecommend from "../components/ThirdRecommend";
import FourthRecommend from "../components/FourthRecommend";
import TagCloud from "../components/TagCloud";
import HotBlog from "../components/HotBlog";
import FollowUs from "../components/FollowUs";
import PayCode from "../components/PayCode";
import Link from "../components/Link";
import {addComment, getCommentList} from "../api/comment";
import {Loading} from "element-ui";
import Sticky from "@/components/Sticky";
import SideCatalog from '@/components/VueSideCatalog'

export default {
  name: "info",
  data() {
    return {
      // 目录列表数
      catalogSum: 0,
      showStickyTop: false,
      showSideCatalog: true,
      showSidebar: true, //是否显示侧边栏
      blogContent: "",
      catalogProps: {
        // 内容容器selector(必需)
        container: '.ck-content',
        watch: true,
        levelList: ["h2", "h3"],
      },
      loadingInstance: null, // loading对象
      showCancel: false,
      submitting: false,
      comments: [],
      commentInfo: {
        // 评论来源： MESSAGE_BOARD，ABOUT，BLOG_INFO 等 代表来自某些页面的评论
        source: "BLOG_INFO",
        blogUid: this.$route.query.blogUid
      },
      currentPage: 1,
      pageSize: 10,
      total: 0, //总数量
      toInfo: {},
      userInfo: {},
      blogUid: null, //传递过来的博客uid
      blogOid: 0, // 传递过来的博客oid
      blogData: {
        blogSort: {}
      },
      sameBlogData: [], //相关文章
      dialogPictureVisible: false,
      dialogImageUrl: "",
      openComment: "0", // 开启评论
      openAdmiration: "0", // 开启赞赏
    };
  },
  computed: {
    vueCategory: function () {
      if (!this.showStickyTop && this.showSideCatalog) {
        return 'catalog'
      }
      if (!this.showStickyTop && !this.showSideCatalog) {
        return 'catalog'
      }
      if (this.showStickyTop && this.showSideCatalog) {
        return 'catalog3'
      }
      if (this.showStickyTop && !this.showSideCatalog) {
        return 'catalog2'
      }
    },
    opemCommentCss: function () {
      if (this.openComment == 0) {
        return {
          "min-height": "10px"
        }
      }
    }
  },
  components: {
    //注册组件
    FourthRecommend,
    ThirdRecommend,
    TagCloud,
    HotBlog,
    FollowUs,
    PayCode,
    CommentList,
    CommentBox,
    SideCatalog,
    Link,
    Sticky
  },
  watch: {
    $route(to, from) {
      location.reload()
    }
  },
  mounted() {
    var that = this;
    var params = new URLSearchParams();
    if (this.blogUid) {
      params.append("uid", this.blogUid);
    }
    if (this.blogOid) {
      params.append("oid", this.blogOid)
    }
    getBlogByUid(params).then(response => {
      if (response.code == this.$ECode.SUCCESS) {
        console.log("获取博客信息", response)
        this.blogData = response.data;
        this.blogUid = response.data.uid
        this.blogOid = response.data.oid
        this.commentInfo.blogUid = response.data.uid;
        document.title = response.data.title
        this.getSameBlog()
        this.getCommentDataList();
      }
      setTimeout(() => {
        that.blogContent = response.data.content
        that.loadingInstance.close();
      }, 200)
    });

    var after = 0;
    var offset = 110;
    $(window).scroll(function () {
      var docHeight = $(document).height(); // 获取整个页面的高度(不只是窗口,还包括为显示的页面)
      var winHeight = $(window).height(); // 获取当前窗体的高度(显示的高度)
      var winScrollHeight = $(window).scrollTop(); // 获取滚动条滚动的距离(移动距离)

      if (winScrollHeight < offset) {
        that.showStickyTop = false
      } else {
        that.showStickyTop = true
      }

      if (winScrollHeight > after) {
        // console.log("隐藏顶部栏", winScrollHeight)
        that.showSideCatalog = true
      } else {
        // console.log("显示顶部栏", winScrollHeight)
        that.showSideCatalog = false
      }
      after = winScrollHeight;
      //还有30像素的时候,就查询
      if (docHeight == winHeight + winScrollHeight) {
        if (that.comments.length >= that.total) {
          console.log('已经到底了')
          return;
        }
        let params = {};
        params.source = that.commentInfo.source;
        params.blogUid = that.commentInfo.blogUid;
        params.currentPage = that.currentPage + 1
        params.pageSize = that.pageSize;
        getCommentList(params).then(response => {
          if (response.code == that.$ECode.SUCCESS) {
            that.comments = that.comments.concat(response.data.records);
            that.setCommentList(that.comments);
            that.currentPage = response.data.current;
            that.pageSize = response.data.size;
            that.total = response.data.total;
          }
        });
      }
    })

    // 屏幕自适应
    window.onresize = () => {
      return (() => {
        // 屏幕大于950px的时候，显示侧边栏
        that.showSidebar = document.body.clientWidth > 950
      })()
    }
  },
  created() {
    this.loadingInstance = Loading.service({
      fullscreen: true,
      text: "正在努力加载中~"
    });
    this.blogUid = this.$route.query.blogUid;
    this.blogOid = this.$route.query.blogOid;
    this.setCommentAndAdmiration()
    // 屏幕大于950px的时候，显示侧边栏
    this.showSidebar = document.body.clientWidth > 950
  },
  methods: {
    //拿到vuex中的写的两个方法
    ...mapMutations(["setCommentList", "setWebConfigData"]),
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.getCommentDataList();
    },
    getSameBlog() {
      var blogParams = new URLSearchParams();
      blogParams.append("blogUid", this.blogUid);
      getSameBlogByBlogUid(blogParams).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.sameBlogData = response.data.records;
        }
      });
    },
    // 设置是否开启评论和赞赏
    setCommentAndAdmiration() {
      let webConfigData = this.$store.state.app.webConfigData
      if (webConfigData.createTime) {
        this.openAdmiration = webConfigData.openAdmiration
        this.openComment = webConfigData.openComment
      } else {
        getWebConfig().then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            webConfigData = response.data;
            // 存储在Vuex中
            this.setWebConfigData(response.data)
            this.openAdmiration = webConfigData.openAdmiration
            this.openComment = webConfigData.openComment
          }
        });
      }
    },
    submitBox(e) {
      let params = {};
      params.blogUid = e.blogUid;
      params.source = e.source;
      params.userUid = e.userUid;
      params.content = e.content;
      params.blogUid = e.blogUid;
      addComment(params).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.$notify({
            title: "成功",
            message: "发表成功~",
            type: "success",
            offset: 100
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: response.data,
            offset: 100
          });
        }
        this.getCommentDataList();
      });
    },
    getCommentDataList: function () {
      let params = {};
      params.source = this.commentInfo.source;
      params.blogUid = this.commentInfo.blogUid;
      params.currentPage = this.currentPage;
      params.pageSize = this.pageSize;
      getCommentList(params).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.comments = response.data.records;
          this.setCommentList(this.comments);
          this.currentPage = response.data.current;
          this.pageSize = response.data.size;
          this.total = response.data.total
        }
      });
    },
    //跳转到文章详情
    goToInfo(uid) {
      let routeData = this.$router.resolve({
        path: "/info",
        query: {blogUid: uid}
      });
      window.open(routeData.href, "_blank");
    },
    //跳转到搜索详情页
    goToList(uid) {
      let routeData = this.$router.resolve({
        path: "/list",
        query: {tagUid: uid}
      });
      window.open(routeData.href, "_blank");
    },
    //跳转到搜索详情页
    goToSortList(uid) {
      let routeData = this.$router.resolve({
        path: "/list",
        query: {sortUid: uid}
      });
      window.open(routeData.href, "_blank");
    },
    //跳转到搜索详情页
    goToAuthor(author) {
      let routeData = this.$router.resolve({
        path: "/list",
        query: {author: author}
      });
      window.open(routeData.href, "_blank");
    },

    imageChange: function (e) {
      //首先需要判断点击的是否是图片
      var type = e.target.localName;
      if (type == "img") {
        // window.open(e.target.currentSrc);
        this.dialogPictureVisible = true;
        this.dialogImageUrl = e.target.currentSrc;
      }
    },
    //切割字符串
    subText: function (str, index) {
      if (str.length < index) {
        return str;
      }
      return str.substring(0, index) + "...";
    }
  }
};
</script>

<style>
.emoji-panel-wrap {
  box-sizing: border-box;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: #ffffff;
  width: 470px;
  height: 190px;
  position: absolute;
  z-index: 999;
  top: 10px;
}

.emoji-size-small {
  zoom: 0.3;
  margin: 5px;
  vertical-align: middle;
}

.emoji-size-large {
  zoom: 0.5;
/ / emojipanel表情大小 margin: 5 px;
}

.iconfont {
  font-size: 14px;
  margin-right: 3px;
}

.message_infos {
  width: 96%;
  margin-left: 10px;
}

.noComment {
  width: 100%;
  text-align: center;
}

.catalog {
  position: fixed;
  margin-left: 20px;
  /*max-height: 700px*/
}

.catalog2 {
  position: fixed;
  margin-left: 20px;
  top: 70px;
}

.catalog3 {
  position: fixed;
  margin-left: 20px;
  top: 20px;
}

.line-style {
  display: inline-block;
  height: 20px;
  width: 3px;
  background: transparent;
}

.line-style--active {
  background: currentColor;
}
</style>
